/*总容器样式*/
.wrapper{
    width:100%;
    height:100%;
}





/*头部样式*/
.wrapper header{
    background-color: #17BAF9;
    display: flex;/*弹性盒子*/
    width:100%;
    height: 12vw;
    align-items: center;/*让文本居中*/
}
.wrapper header .icon-location-box
{
    width:3.5vw;
    height: 3.5vw;
    margin: 0 1vw 0 3vw;
}
.wrapper header .location-text{
    color: white;
    font-size: 4.5vw;
    font-weight: bold;
}
.wrapper header .location-text .fa-caret-down{
    margin-left: 1vw;
}


/*搜索框样式*/
.wrapper .search{
    width:100%;
    height: 10vw;

}
.wrapper .search .search-fixed-top{
    width: 100%;
    display: flex;
    height: 10vw;
    justify-content: center;
    align-items: center;
}

.wrapper .search .search-fixed-top .search-panel{
    height: 8vw;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    border:2px solid #17BAF9;
    border-radius: 25px;
    font-size: 5vw;
    color:#9F9F9F
}
.wrapper .search .search-fixed-top i{
    font-size: 5vw;
}
.wrapper .search .search-fixed-top .search-panel .search-button{
    height: 8vw;
    font-size: 4vw;
    border-radius: 25px;
    background-color: #17BAF9;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;/*局部居中*/
    cursor: pointer;
}

/*点餐分类样式*/
.wrapper .foodType{
    width:100%;
    height: 48vw;

    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;
    align-content: center;/*整体居中*/
}
.wrapper .foodType .foodTypeItem{
    display: flex;
    flex-direction: column;

    height: 20vw;
    width: 18vw;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.wrapper .foodType .foodTypeItem img{
    width: 12vw;
    height: 10.3vw;
}
.wrapper .foodType .foodTypeItem p{
    font-size: 3.2vw;
    color: #666;
}

/*横幅广告样式*/
.wrapper .banner{
    width:95vw;
    height: 29vw;
    margin-left: 2.5vw;/*前一个表示离上面0，离左右自动对*/

    box-sizing: border-box;
    background-image: url(../img/index_banner.png);
    background-repeat: no-repeat;
    background-size: cover;

    padding-top: 0.5vw;
    padding-left: 6vw;
}

/*超级会员样式*/
.wrapper .superMember{
    width: 95vw;
    height: 11.5vw;
    margin-left: 2.5vw;
    box-sizing: border-box;
    margin-top:1.3vw;
    border-radius:2px;

    background-color: #feedc1;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .superMember .left{
    display: flex;
    align-items: center;
    margin-left: 4vw;
    user-select: none;
}
.wrapper .superMember .right{
    font-size: 3vw;
    margin-right: 4vw;
    cursor: pointer;
}

/*推荐商家样式*/
.wrapper .recommend{
    width:100%;
    height: 14vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper .recommend .recommend-line{
    height: 0.2vw;
    width: 6vw;
    background-color: #888888;
}
.wrapper .recommend p{
    font-size: 4vw;
    margin: 0 4vw;
}

/*推荐方式样式*/
.wrapper .recommendType{
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 3.5vw;
    color: #555555;
    margin-bottom: 5vw;
}

/*商家列表样式*/
.wrapper .businessList{
    width: 100%;
    margin-bottom: 11vw;
}
.wrapper .businessList .business{
    width:100%;
    box-sizing: border-box;
    border-bottom: 1px solid #DDDDDD;
    display: flex;
    padding: 2.5vw;
}
.wrapper .businessList .business img{
    width: 20vw;
    height: 20vw;
}
.wrapper .businessList .business .businessInfo{
    color: #666666;
    font-size: 3.1vw;
    width: 100%;
    padding-left: 3vw;
    line-height: 0;
}
.wrapper .businessList .business .businessInfo .businessInfoHead{
    align-items: center;
    justify-content: space-between;
    display: flex;

}
.wrapper .businessList .business .businessInfo h3{
    color: #333;
    font-size: 4vw;
}
.wrapper .businessList .business .businessInfo .businessInfoStart{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2vw;
}
.wrapper .businessList .business .businessInfo .businessInfoStart .businessInfoStartLeft {
    display: flex;
    align-items: center;
    font-size: 3.1vw;
}
.wrapper .businessList .business .businessInfo .businessInfoStart .businessInfoStartLeft .fa-star {
    color: #FEC80E;
    margin-right: 0.5vw;
}
.wrapper .businessList .business .businessInfo .businessInfoStart .businessInfoStartRight {
    color:white;
    background-color: #0097ff;
    font-size: 2.4vw;
    border-radius: 2px;
    padding: 0.6vw;
}
.wrapper .businessList .business .businessInfo .businessDelivery{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
}
.wrapper .businessList .business .businessInfo .businessInfoDetail{
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
}
.wrapper .businessList .business .businessInfo .businessInfoDetail div{
    border: 1px solid #DDDDDD;
    line-height: 1.1;
    border-radius: 2px;
    padding: 0 0.1vw;
}
.wrapper .businessList .business .businessInfo .businessInfoPromotion{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2vw;
}
.wrapper .businessList .business .businessInfo .businessInfoPromotion .businessInfoPromotionLeft {
    display: flex;
    align-items: center;
}
.wrapper .businessList .business .businessInfo .businessInfoPromotion .businessPromotionLeftIcon{
    color: white;
    line-height: normal;
    width: 4vw;
    height: 4vw;
    border-radius: 3px;
    background-color: #70BC47;
    font-size: 3vw;
    margin-right: 2vw;
}
.wrapper .businessList .business .businessInfo .businessInfoPromotion .businessInfoPromotionRight {
    display: flex;
    align-items: center;
    justify-content:center;
}
/*底部样式*/
.wrapper .footer{
    position: fixed;/*固定*/
    left:0;
    bottom:0;/*左下角横纵为0*/

    width: 100%;
    height: 14vw;

    display: flex;
    justify-content: space-around;
    align-items: center;

    border-top: 1px solid #DDD;
}

.wrapper .footer div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color:#858585;
    cursor: pointer;/*确定鼠标指向时发生的形状*//*eg:巴掌，漏斗，箭头，十字*/

}
.wrapper .footer div p {
    font-size: 2.8vw;
}

.wrapper .footer div i {
    font-size: 5vw;
}